<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                template="/templates/mainLayout.xhtml">

    <ui:define name="title">Thông tin role</ui:define>
    <ui:define name="idleMonitor">
        <h:form id="monitorForm" prependId="false">
            <p:idleMonitor timeout="#{roleBean.conversation.getTimeout()}" onidle="idleDialog.show();" 
                           onactive='window.location = "list.jsf";' rendered="#{!roleBean.conversation.isTransient()}"/>

            <p:dialog header="Info" resizable="false" widgetVar="idleDialog" modal="true" width="400">
                <h:outputText value="The session for this page is timeout" />
            </p:dialog>
        </h:form>
    </ui:define>
    <ui:define name="content">
        <f:event type="preRenderView" listener="#{roleBean.preViewAction()}" />
        <!-- Tab Menu -->
        <ui:include src="/templates/tabmenu.xhtml">
            <ui:param name="tabIndex" value="5"/>
        </ui:include>
        
        <p:outputPanel>
            <p:layout style="height: 100%;">
                <p:layoutUnit position="west" resizable="true" minSize="210">  
                    <ui:include src="/admin/leftmenu.xhtml"/>
                </p:layoutUnit>

                <p:layoutUnit position="center">
                    <h:form id="mainForm">
                        <p:panel header="Thông tin role">
                            <p:messages id="msgs"/>
                            <p:toolbar style="margin-bottom: 10px; margin-top: 10px;">
                                <p:toolbarGroup align="left">
                                    <p:button value="Tạo mới" outcome="new"/>
                                    <p:commandButton value="Sửa" action="#{roleBean.preEditAction}" update="mainForm" rendered="#{roleBean.role != null}"/>
                                    <p:commandButton value="Xoá" actionListener="#{roleBean.preDeleteAction}"
                                                     rendered="#{roleBean.role != null}" oncomplete="handleDeleteRequest(xhr, status, args)"/>
                                </p:toolbarGroup>
                            </p:toolbar>

                            <h:panelGrid styleClass="panelGrid" columnClasses="ui-state-default labelCol, ui-widget-content" 
                                         columns="2" cellpadding="5" width="100%" rendered="#{roleBean.role != null}">  
                                <h:outputLabel for="name" style="display: inline; float: right; padding-right: 5px;" value="Name" />  
                                <h:outputText value="#{roleBean.role.name}" id="name" />

                                <h:outputLabel style="display: inline; float: right; padding-right: 5px;" value="Code" />  
                                <h:outputText value="#{roleBean.role.code}"/>

                                <h:outputLabel style="display: inline; float: right; padding-right: 5px;" value="Description" />  
                                <h:outputText value="#{roleBean.role.description}"/>

                                <h:outputLabel style="display: inline; float: right; padding-right: 5px;" value="Quyền" />
                                <h:panelGroup>
                                    <p:toolbar style="margin-bottom: 5px; margin-top: 5px;">
                                        <p:toolbarGroup align="left">
                                            <p:commandButton value="Thêm quyền" onclick="addPermissionDialog.show();"/>
                                            <p:commandButton value="Xoá quyền" actionListener="#{roleBean.preDeletePermissionAction}"
                                                             oncomplete="handleDeletePermissionRequest(xhr, status, args)"/>
                                        </p:toolbarGroup>
                                    </p:toolbar>
                                    <p:dataTable var="permission" value="#{roleBean.role.permissions}" paginator="true" rows="10"
                                                 paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"  
                                                 rowsPerPageTemplate="10,20,30" rowKey="#{permission}"
                                                 selection="#{roleBean.selectedPermissions}">
                                        <p:column selectionMode="multiple"/>
                                        <p:column headerText="Quyền">
                                            <h:outputText value="#{permission}"/>
                                        </p:column>
                                    </p:dataTable>
                                </h:panelGroup>
                            </h:panelGrid>

                            <p:toolbar style="margin-bottom: 10px; margin-top: 10px;">
                                <p:toolbarGroup align="left">
                                    <p:button value="Tạo mới" outcome="new"/>
                                    <p:commandButton value="Sửa" action="#{roleBean.preEditAction}" update="mainForm" rendered="#{roleBean.role != null}"/>
                                    <p:commandButton value="Xoá" actionListener="#{roleBean.preDeleteAction}"
                                                     rendered="#{roleBean.role != null}" oncomplete="handleDeleteRequest(xhr, status, args)"/>
                                </p:toolbarGroup>
                            </p:toolbar>

                            <p:dialog header="Info" widgetVar="deleteConfirmDialog" width="300" showEffect="explode" hideEffect="explode">
                                <h:panelGrid columns="1">
                                    <f:facet name="header">
                                        <h:outputText value="Do you want to delete this role?"/>
                                    </f:facet>
                                    <h:panelGroup>
                                        <p:commandButton value="Yes" oncomplete="deleteConfirmDialog.hide()" update="mainForm" 
                                                         actionListener="#{roleBean.deleteAction()}"/>
                                        <p:commandButton value="No" onclick="deleteConfirmDialog.hide()" type="button" />
                                    </h:panelGroup>
                                </h:panelGrid>
                            </p:dialog>

                            <p:dialog header="Info" widgetVar="deletePermissionConfirmDialog" width="300" showEffect="explode" hideEffect="explode">
                                <h:panelGrid columns="1">
                                    <f:facet name="header">
                                        <h:outputText value="Do you want to remove this/these permission(s)?"/>
                                    </f:facet>
                                    <h:panelGroup>
                                        <p:commandButton value="Yes" oncomplete="deletePermissionConfirmDialog.hide()" update="mainForm" 
                                                         actionListener="#{roleBean.deletePermissionAction()}"/>
                                        <p:commandButton value="No" onclick="deletePermissionConfirmDialog.hide()" type="button" />
                                    </h:panelGroup>
                                </h:panelGrid>
                            </p:dialog>

                            <p:dialog header="Thêm quyền" widgetVar="addPermissionDialog" resizable="false">
                                <h:panelGrid styleClass="panelGrid" columnClasses="ui-state-default labelCol, ui-widget-content" 
                                             columns="2" cellpadding="5" width="300px">                                         
                                    <h:outputLabel style="display: inline; float: right; padding-right: 5px;" value="Quyền"/>
                                    <p:inputText value="#{roleBean.permission}" maxlength="100"/>

                                    <h:outputLabel value=""/>
                                    <p:commandButton value="Lưu" update="mainForm" oncomplete="addPermissionDialog.hide();"
                                                     actionListener="#{roleBean.addPermissionAction()}"/>
                                </h:panelGrid>
                            </p:dialog>

                            <script type="text/javascript">
                                function handleDeleteRequest(xhr, status, args) {
                                    if(args.validationFailed || args.invalid) {
                                        ; 
                                    } else {
                                        deleteConfirmDialog.show();
                                    }
                                }
                                function handleDeletePermissionRequest(xhr, status, args) {
                                    if(args.validationFailed || args.invalid) {
                                        ;
                                    } else {
                                        deletePermissionConfirmDialog.show();
                                    }
                                }
                            </script>
                        </p:panel>
                    </h:form>
                </p:layoutUnit>
            </p:layout>
        </p:outputPanel>
    </ui:define>
</ui:composition>